@charset "utf-8";
.pl0{
    padding-left: 0;
}
.mb45{
    margin-bottom:45px ;
}
.imgwrap{
    img{
        width:100%;
    }
}
header{
    padding-top: 50px;
    .navbar-default{
        background-color: #222222;
        border:none;
        .navbar-nav{
            >.active{
                >a{
                    &,&:hover{
                    background-color: #080808;
                    color: #fff;
                    }
                }
            }
            >li{
                >a{
                    color: #9d9d9d;
                }
            }
        }
    }
    .navbar{
        margin-bottom: 0;
    }
    .navbar-brand{
        padding: 7px 6px;
    }
    .bgwrap{
        background-color:#2b80d9 ;
    }
}
.dibu{
    padding-top: 40px;
    background: #3b3b3b;
//  height: 113px;
    .dibubox{
        >p{
            display: inline;
            font-size: 0;
            a{
                color: #a1a3ab;
                font-size:15px; 
                &:hover{
                    color: white;
                }
            }
        }
        >div{
            font-size:15px; 
            a{
                color: #a1a3ab;
            }
        }
    }
    .dibuicon{
        >div{
            float: right;
            >p{
                display: inline;
                font-size: 0;
                position: relative;
                span{
                    display: inline-block;
                    height: 38px;
                    width: 38px;
                    margin-right: 15px;
                }
                .youjian{
                    background: url(../img/youjian_07.jpg) no-repeat scroll 0% 0% transparent;
                }
                .weixin{
                    background: url(../img/weixin_07.jpg) no-repeat scroll 0% 0% transparent;
                }
                .koukou{
                    background: url(../img/koukou_07.jpg) no-repeat scroll 0% 0% transparent;
                }
                
            }
            >p:nth-child(1){
                img{
                    display: none;
                    position: absolute;
                    left: -50px;
                    bottom: 50px;
                    transition: all 5s;
                }
                &:hover{
                    a{
                        transform: translateY(-10%);
                    }
                    img{
                        display: block;
                    }
                }
            }
            >p:nth-child(2){
                img{
                    display: none;
                    position: absolute;
                    left: -50px;
                    bottom: 50px;
                    transition: all 5s;
                    width: 142px;
                    height: 150px;
                }
                &:hover{
                    a{
                        transform: translateY(-10%);
                    }
                    img{
                        display: block;
                    }
                }
            }
            >p:nth-child(3){
                img{
                    display: none;
                    position: absolute;
                    left: -50px;
                    bottom: 50px;
                    transition: all 5s;
                }
                &:hover{
                    a{
                        transform: translateY(-10%);
                    }
                    img{
                        display: block;
                    }
                }
            }

        }
                }
}